<template>
    <div class="table-monitor-management">
        <el-card>
            <!-- 搜索和新建按钮 -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="16">
                    <el-input v-model="searchQuery" placeholder="搜索表格名称" style="width: 300px;" />
                    <el-button style="margin-left: 10px;" type="primary" icon="Plus"
                        @click="handleAddTable">新建表格监控</el-button>
                </el-col>
                <el-col :span="8">
                    <div class="table-top-right-button">
                        <el-button type="primary" @click="handlePreviewTables">预览表格</el-button>
                        <el-button type="danger" icon="Delete" @click="handleDeleteTables">批量删除</el-button>
                    </div>
                </el-col>
            </el-row>

            <!-- 表格展示 -->
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="表格名称"></el-table-column>
                <el-table-column prop="dataSource" label="数据来源"></el-table-column>
                <el-table-column prop="updateFrequency" label="更新频率"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" style="color: red;"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="totalItems" :current-page.sync="currentPage"
                :page-size="pageSize" @current-change="handlePageChange"></el-pagination>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 数据定义
const tableData = ref([
    {
        id: 1,
        name: '系统性能监控表',
        dataSource: 'API 接口',
        updateFrequency: '5秒',
        createTime: '2024-01-15 14:30:00'
    },
    {
        id: 2,
        name: '用户行为分析表',
        dataSource: '数据库表',
        updateFrequency: '10秒',
        createTime: '2024-01-14 16:20:00'
    }
]);

const searchQuery = ref('');
const totalItems = ref(2);
const currentPage = ref(1);
const pageSize = ref(10);

// 方法定义
function handleAddTable() {
    console.log('Adding new table');
}

function handlePreviewTables() {
    console.log('Previewing tables');
}

function handleDeleteTables() {
    console.log('Deleting tables');
}

function handleEdit(row) {
    console.log('Editing row:', row);
}

function handleDelete(row) {
    console.log('Deleting row:', row);
}

function handlePageChange(page) {
    currentPage.value = page;
}
</script>

<style scoped>
.table-monitor-management {}

.el-pagination {
    margin-top: 20px;
}
.table-top-right-button{
    display: flex;
    justify-content: flex-end;
}
</style>